import React, {PureComponent} from 'react';
import { Form, Modal, Tabs, Table } from 'antd';
import moment from 'moment';
import TableList from '@/components/TableList';
import styles from '../../pages/search.less';

const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

// 申请详情页面，包含审核
@Form.create()
class SceenTable extends PureComponent {

  render() {
    const { text, strategyTargetVoList, arrayToString } = this.props;
    const columns1 = [
      {
        title: '姓名',
        dataIndex: 'userName',
        width:'50%',
      },
      {
        title: '登录名',
        dataIndex: 'userCode',
        width:'50%',
      }
    ];

    const columns2 = [
      {
        title: '组织名称',
        dataIndex: 'orgName',
        width:'50%',
      },
      {
        title: '备注',
        dataIndex: 'remark',
        width:'50%',
      }
    ];

    const columns3 = [
      {
        title: '自定义组名称',
        dataIndex: 'groupName',
        width:'50%',
      },
      {
        title: '自定义组管理员',
        dataIndex: 'adminUserName',
        width:'50%',
      }
    ];

    return (
      <Tabs defaultActiveKey='3'>
        <TabPane tab="基本信息" key="3">
          <FormItem labelCol={{span: 5}} wrapperCol={{span: 19}} label="策略名称">
          <div>{text.name}</div>
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 19}} label="禁止操作">
          <div>{text.strategyOpttypeVoList ? arrayToString(text.strategyOpttypeVoList,'optTypeName'):' '}</div>
        </FormItem>
        <FormItem labelCol={{span: 5}} wrapperCol={{span: 19}} label="文件等级">
          <div>{text.strategyFilelevelVoList ? arrayToString(text.strategyFilelevelVoList,'fileLevelName'):' '}</div>
        </FormItem>
        </TabPane>
      {
        strategyTargetVoList&&strategyTargetVoList.map((v,i) =>{
          if(v.userType == 0){
            return (
              <TabPane tab="人员" key="0">
                <Table
                  style={{overflow: 'auto',height: '300px'}}
                  pagination={false}
                  loading={false}
                  dataSource={v.objectList}
                  columns={columns1}
                  rowKey={record => record.userCode}
                />
              </TabPane>
            )
          }
          if(v.userType == 1){
            return (
              <TabPane tab="组织机构" key="1">
                <Table
                  style={{overflow: 'auto',height: '300px'}}
                  pagination={false}
                  loading={false}
                  dataSource={v.objectList}
                  columns={columns2}
                  rowKey={record => record.id}
                />
              </TabPane>
            )
          }
          if(v.userType == 2){
            return (
              <TabPane tab="自定义组" key="2">
                <Table
                  style={{overflow: 'auto',height: '300px'}}
                  pagination={false}
                  loading={false}
                  dataSource={v.objectList}
                  columns={columns3}
                  rowKey={record => record.id}
                />
              </TabPane>
            )
          }
        })
      }
      </Tabs>
    );
  }
}

export default SceenTable;
